.left{
    float: left;
}
.right{
    float: right;
}
#myForm{
    position: absolute;
    top:10.5vh;
    height: 91vh;          
    right: 0px;
    width: 86.5vw;
    border-top:0.6vw solid  #F2F2F2;
    border-left:0.6vw solid #F2F2F2;
    padding: 1vw;
    background-color: white;
    font-family: initial;
    box-sizing: border-box;
}
.section1 p{
    font-size: 17px;
    margin-bottom: 20px;
}
.leftSide{
    width: 12vw;
    height: 80vh;
    text-align: center;
    font-size: 12px;
    position: absolute;
    left:0;
}
#xiala{
    transition: .45s ease-in-out;
}
.leftSide-top{
    padding-left: .8vw;
    font-size: 15px;
    height:6vh;
    line-height: 5vh;
    cursor: pointer;  
    border: 3px solid #7F7F7F; 
    background-color:#F2F2F2; 
}
.leftSide #menu{
    transition: .45s ease-in-out;
    height: 66vh;
    overflow: hidden;
}
.leftSide>ul>li{
    width: 11.5vw;
    margin: 1px auto 0;
    cursor: pointer;
    height: 8vh;
    line-height: 8vh;
    font-size: 14px;
    padding-left: .8vw;
   
}
.leftSide>ul>li i{
    color:silver;
    transition: .1s ease-in-out;
}
.leftSide>ul>li:hover{
    outline:#1DAFEC solid 2px ;
    color:#1DAFEC ;
}
.leftSide>ul>li:hover i{
    transform: scale(1.4);
    color:#1DAFEC ;
}
.leftSide>ul>li:nth-child(5):hover{
    color:red;
    outline: red 2px solid;
}
.leftSide>ul>li:nth-child(5):hover i{
    color:red;
    animation: myPhone .3s infinite; 
}
.leftSide>ul>li:nth-child(6):hover{
    color:green;
    outline: green 2px solid;
}
.leftSide>ul>li:nth-child(6):hover i{
    color:green;   
    animation: myLeaf 3s infinite; 
}
.leftSide>ul>li:nth-child(7):hover{
    color:purple;
    outline: purple 2px solid;
}
.leftSide>ul>li:nth-child(7):hover i{
    color:purple;
    animation: myPig 1.2s infinite; 
}
.leftSide>ul>li:last-child{
    padding-left:2.4vw;
}
.leftSide>ul>li:last-child i:last-child{
font-size: 10px;
margin-left: -6px;
}
.leftSide>ul>li:last-child:hover i:last-child{
    animation:myRotate 2s infinite;
    color:black;
    }
.leftSide>ul>li:last-child i:nth-child(2){
    font-size: 25px;
    }
.leftSide>ul>li:last-child:hover i:nth-child(2){
        animation: myHandle 1s infinite; 
        color:black;
        }
.leftSide>ul>li:last-child:hover{
    color:black;
    outline: black 2px solid;
}
@keyframes myPhone{
    0%{
        transform: rotate(-10deg);
    }
    90%{
        transform: rotate(10deg);
    }
    100%{
        transform: rotate(-10deg);
    }
}
@keyframes myLeaf{
    0%{
        transform: rotateY(0deg);
    }
    50%{
        transform: rotateY(180deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}
@keyframes myPig{
    0%{
       transform: scale(1);
    }
    50%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes myRotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(-360deg);
    }
    100%{
        transform: rotate(-720deg);
    }
}
@keyframes myHandle{
    0%{
        transform: rotate(50deg);
    }
    50%{
        transform: rotate(65deg);
    }
    100%{
        transform: rotate(50deg);
    }
}
.rightSide{
    width: 70vw;
    position: absolute;
    right: 2vw;
}
.rightSide thead tr th{
    background-color: #F2F2F2;
    border:2px solid #DDDDDD;
    text-align: center;
    width: 14vw;
    height: 7vh;
}
.rightSide #userTable{
    text-align: center;
}
.rightSide #userTable tr{
    height: 8vh;
}
#userTable tr:nth-child(2n){
    background-color: #F3FAFF;
}
.search{
   position: absolute;
   top:-5.5vh;
   left:-1px;
}
.search i{
    font-size: 22px;
    color:#1DAFEC;
    position: relative;
    top:1vh;
    cursor: pointer;
}
.search input{
    width: 15vw;
    cursor: text;
}
.searchBorder{
    display: none;
}
.confirm ,.confirm2,.confirm3,.confirm4,.confirm5,.confirm6,.confirm7,.confirm8{
    width: 20vw;
    height: 10vw;     
    line-height: 5vw;
    border-radius: 20px;     
    position: absolute; 
    margin:auto;
    left: 0;
    bottom: 0;
    right: 0;
    top:0;
    font-size: 18px;
    text-align: center;
    background-color: white;
}
.confirm span,.confirm2 span,.confirm3 span,.confirm4 span,.confirm5 span,.confirm6 span,.confirm7 span,.confirm8 span{
    margin-left: 1vw;
}
.confirm button,.confirm2 button,.confirm3 button,.confirm4 button,.confirm5 button,.confirm6 button,.confirm7 button,.confirm8 button{
    margin-left: .5vw;
}
.myAdd,.myAdd2,.myAdd3,.myAdd4,.myAdd5,.myAdd6,.myAdd7,.myAdd8{
    width: 400px;
    height: 400px;          
    position: absolute; 
    margin:auto;
    left: 0;
    bottom: 0;
    background-color: white;
    padding: 50px 30px;
}
.myAdd input,.myAdd2 input,.myAdd3 input,.myAdd4 input,.myAdd5 input,.myAdd6 input,.myAdd7 input,.myAdd8 input{
    cursor: text;
}